<template>
  <div class="city-group">
    <van-index-bar :index-list="indexList">
      <!-- 热门城市 -->
      <van-index-anchor index="热门" />
      <div class="list">
        <template v-for="(city, index) in groupData?.hotCities" :key="index">
          <div class="hot" @click="handleCityClick(city)">{{city.cityName}}</div>
        </template>
      </div>
      <!-- 全部城市 -->
      <template v-for="(group, index) in groupData?.cities" :key="index">
        <van-index-anchor :index="group.group" />
        <template v-for="(city, indey) in group.cities" :key="indey">
          <van-cell :title="city.cityName" @click="handleCityClick(city)" />
        </template>
      </template>
    </van-index-bar>
  </div>
</template>

<script setup>
import { computed } from "vue"
import { useRouter } from "vue-router"
import { useCityStore } from "@/store"
const props = defineProps({
  groupData: {
    type: Object,
    defaulted: {}
  }
})
const router = useRouter()
const cityStore = useCityStore()
// 拼音列表
const indexList = computed(() => ['#', ...props.groupData.cities.map(item => item.group)]) 
// 热门城市点击事件
const handleCityClick = (city) => {
  cityStore.changeCurrentCityData(city)
  router.back()
}
</script>

<style lang="less" scoped>
.list {
  display: flex;
  justify-content: space-around;
  padding: 10px;
  padding-right: 25px;
  flex-wrap: wrap;

  .hot {
    width: 70px;
    height: 28px;
    border-radius: 14px;
    font-size: 12px;
    color: #000;
    background-color: #fff4ec;
    text-align: center;
    line-height: 28px;
    margin: 10px 0;
  }
}
</style>
